<template>
  <!-- 铃铛信息收集 -->
  <div>
    <!-- 顶部导航开始 -->
    <van-nav-bar title="消息">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <!-- 顶部导航结束 -->
    <!-- 消息卡片 -->
    <van-card
      centered
      desc="回复帮友内容能获得更高人气"
      title="评论、作业"
      :thumb="require('../assets/baking_log/comment.png')"
    />
    <van-card
      centered
      desc="来自你的作品、食谱"
      title="点赞、收藏"
      :thumb="require('../assets/baking_log/upvote.png')"
    />
    <van-card
      centered
      desc="有人【打赏/答谢】了你，快看看吧"
      title="打赏"
      :thumb="require('../assets/baking_log/reward.png')"
    />
    <van-card
      centered
      desc="有人回答了你的问题or评论了你"
      title="问答"
      :thumb="require('../assets/baking_log/qaa.png')"
    />
    <van-card
      centered
      desc="系统消息 | 40分钟前"
      :thumb="require('../assets/login_logo/logo@114.png')"
    >
      <template #title
        ><span style="font-size: 18px; font-weight: bold; color: #4a4945"
          >官方消息</span
        >
        <van-tag type="warning" style="left: 5px; bottom: 2px">官方</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #333;
}
:deep(.van-card__header) {
  align-items: center;
}
:deep(.van-card__thumb) {
  width: 50px;
  height: 50px;
}
:deep(.van-card__content) {
  min-height: 0;
}
:deep(.van-card__title) {
  color: #4a4945;
  font-size: 18px;
  font-weight: bold;
}
</style>

<style lang="scss" scoped></style>
